@charset "utf-8"; 
.magicBox{
	padding-top: 59px;
	.magicBoxMain{
		padding:30px 15px;
		width: 100%;
		max-width: 960px;
		margin: 0 auto;
		.title{
			h3{
				text-align: center;
				font-size: 16px;
				font-weight: 700;
				color: #383b4a;
			}
			p{
				font-size: 14px;
				margin-top: 10px;
				color: #747675;
				text-align: center;
				
			}
		}
		
		.magicBoxMainCon{ 
			.boxCon{
				padding-top: 50px;
				h3{
					color: #505153;
					font-size: 14px;
					line-height: 24px;
				}
				
				ul{
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: space-between;
					li{
						display: flex;
						flex-direction: row;
						margin: 15px 0;
						    width: 280px; 
						    align-items: center;
						    background: #fff;
						    border-radius: 4px;
						    padding: 20px 15px;
						    box-shadow: 0 2px 12px #ccc;
							.tu{
								width: 40px;
								height: 40px;
								position: relative;
								display: flex;
								flex-direction: row;
								justify-content: center;
								align-items: center;
								img{
									display: block;
									max-width: 100%;
									max-height: 100%;
								}
							}
							.txt{
									    margin-left: 10px;
									    display: flex;
									    flex-direction: column;
									    justify-content: center;
										p{
											color: #505153;
											font-size: 14px;
											font-weight: 600;
										}
										span{
											display: block;
											font-size: 14px;
											    margin-top: 5px;
											    color: #c1c2c6;
										}
								}
							
					}
				}
			}
		}
	}
}

@media screen and (max-width:767px){
	.magicBox{
		.magicBoxMain{
			width: auto;
			.magicBoxMainCon{
				.boxCon{
					>ul{
						justify-content: center;
						>li{
							margin: 10px;
						}
					}
				}
			}
		}
	}
}